<template>
    <movable-area v-if="visible && unRead">
        <movable-view :x="x" :y="y" direction="all" @change="onChange" @click="toCustom">
            <div class="float_ball">
                <span class="point">{{unRead}}</span>
                <div class="icon">
                    <image :src="imgList[actImgIndex]" mode="" />
                </div>
            </div>
        </movable-view>
    </movable-area>
</template>

<script>
import { mapState } from 'vuex'
import { getUserUnReadCnt } from '@/request/user'
export default {
    data() {
        return {
            x: '',
            y: '',
            visible: false,
            timer: null,
            count: 0,
            unRead: 0,
            actImgIndex: 0,
            imgList: []
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        })
    },
    watch: {
        'userInfo.vip'(val) {
            this.init(val)
        }
    },
    mounted() {
        const res = uni.getSystemInfoSync();
        this.x = res.windowWidth * 0.8
        this.y = res.windowHeight * 0.8

        if( this.$store.state.user.userInfo.vip == '01') {
            this.init(this.$store.state.user.userInfo.vip)
        }
    },
    methods: {
        init(vipStatus){
            if(vipStatus == '01') {
                this.visible = true
                this.startLoop()
            } else {
                this.visible = false
                clearInterval(this.timer)
                this.count = 0
            }
        },
        startLoop() {
            console.log('start_loop');
            this.getList()
            clearInterval(this.timer)
            this.count = 0
            this.timer = setInterval(() => {
                let length = this.imgList.length
                this.count ++
                this.actImgIndex ++ 
                if(this.actImgIndex >= length) {
                    this.actImgIndex = 0
                }
                if(this.count % 4 === 0) { //6秒轮询一次 1500 * 4 = 6
                    this.getList()
                }
            },  process.env.NODE_ENV === 'development' ? 150000 : 1500)
        },
        getList() {
            if(!this.$store.state.user.account.token) {
                this.count = 0
                return clearInterval(this.timer)
            }
            getUserUnReadCnt({}, { loadingIcon: false }).then(res => {
                this.unRead = res.data.cnt
                this.visible = this.unRead > 0
                if(this.imgList.length != res.data.data.length) {
                    this.actImgIndex = 0
                }
                this.imgList = res.data.data.map(i => i && i.headImg)
            })
        },
        toCustom() {
            this.$toWxAuth('/pages/custom')
        },
        onChange(e) {
            this.x = e.detail.x
            this.y = e.detail.y

        }
    }
}
</script>

<style lang="less" scoped>

    movable-area{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        pointer-events: none;
        z-index: 555555555;
        movable-view{
            width: 110rpx;
            height: 110rpx;
            pointer-events: auto;
        }
    }
    .float_ball {
        // position: fixed;
        // right: 40rpx;
        // bottom: 280rpx;
        pointer-events: none;
        width: 114rpx;
        height: 114rpx;
        box-shadow: 0 0 10px #999;
        .align(center);
        border-radius: 50%;
        background-color: #fff;
        border: 6rpx solid #fff;
        .point{
            position: absolute;
            top: 0;
            left: 75rpx;
            color: #fff;
            padding: 0 10rpx;
            height: 36rpx;
            font-size: 26rpx;
            border-radius: 18rpx;
            .align(center);
            background: #e02e42;
            z-index: 20;
        }
        .icon{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            image{
                width: 100%;
                height: 100%;
            }
        }
    }

</style>

